<template>
	<view class="page">

		<view class="search-block">
			<view class="search-icon-wapper">
				<image class="search-ico" src="/static/icos/search.png" mode=""></image>
			</view>
			<input class="search-text" placeholder="搜索预告片" maxlength="10" confirm-type="search" @confirm="searchMe" focus="true" />

		</view>

		<!-- 内容 -->
		<view class="movie-list page-block">
			<view class="movie-wapper" v-for="(item,index) in trailerList" :key="index">
				<image 
				class="poster" 
				:src="item.cover" 
				:data-trailerId="item.id"
				@click="showTrailer"
				mode="widthFix"></image>
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				trailerList: [],
				keyworks: "",
				page: 1,
				totalPages: 1
			}
		},
		onLoad() {
			this.refresh();
		},
		onUnload() {
			this.thistrailerList = []
		},
		onHide() {

		},
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			var me = this;
			var page = me.page + 1;
			var keywords = me.keyworks;
			var totalPage = me.totalPages;
			
			if(page > totalPage){return};
			
			me.pagedTrailerList(keywords,page,15);
			
		},
		methods: {
			showTrailer(e){
				
				var trailerId = e.currentTarget.dataset.trailerid;
				
				uni.navigateTo({
					url:"../movie/movie?trailerId=" + trailerId
				})
			},
			refresh() {
				var me = this;
				uni.showLoading({
					title: '请稍后...',
					mask: true
				});
				uni.showNavigationBarLoading();

				//猜你喜欢
				var serverUrl = me.serverUrl;
				
				uni.request({
					url: serverUrl + '/search/list?qq=3316368400&keywords=&page=&pageSize',
					method: "POST",
					success: (res) => {
						// debugger
						// console.log(res.data);
						if (res.data.status == 200) {
							this.trailerList = res.data.data.rows

						}
					},
					complete: () => {
						uni.hideLoading()
						uni.hideNavigationBarLoading()
						// uni.stopPullDownRefresh()
					}
				})
			},
			pagedTrailerList(keywords, page, pageSize) {
				var me = this;
				uni.showLoading({
					title: '请稍后...',
					mask: true
				});
				uni.showNavigationBarLoading();

				//猜你喜欢
				var serverUrl = me.serverUrl;
				uni.request({
					url: serverUrl + '/search/list?qq=3316368400&keywords=' + keywords +
						'&page=' + page +
						'&pageSize=' + pageSize,
					method: "POST",
					success: (res) => {
						// debugger
						// console.log(res.data);
						if (res.data.status == 200) {
							var tmpList = res.data.data.rows
							me.trailerList = me.trailerList.concat(tmpList);
							me.totalPages = res.data.data.total; //总页数
							me.page = page;
						}
					},
					complete: () => {
						uni.hideLoading()
						uni.hideNavigationBarLoading()
						// uni.stopPullDownRefresh()
					}
				})
			},
			searchMe(e) {

				var me = this;
				//获取搜索内容
				var value = e.detail.value;
				me.keyworks = value
				//清空
				me.trailerList = [];
				me.pagedTrailerList(value, 1, 15);

			}
		}


	}
</script>

<style>
	@import url("search.css");
</style>
